<template>
  <!-- 专辑详情页面-->
    <div class="album-list" v-loading.fullscreen.lock="isLoading">
        <el-row style="margin-bottom: 2vw">
            <el-col :span="24">
                <AlbumListDetailHeader :details="albumDetail"/>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="24">
                <!--type表示列表类别-->
                <SongList :songs="{listId:$route.params.id,allSong:songs,type}"/>
            </el-col>
        </el-row>
        <!-- 版权显示部分-->
        <el-row style="margin-top: 1vw" v-show="albumDetail.company.id">
            <el-col :span="24" class="album-copyright">
                <font-awesome-icon :icon="['fas', 'copyright']"/>
                {{ albumDetail.company.name }}
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <!--该歌手的更多专辑-->
        <el-row v-show="isHasMore">
            <el-col :span="24">
                <SongPart :music-list="albumItem"/>
            </el-col>
        </el-row>
        <BackToHead/>
    </div>
</template>

<script>

import AlbumListDetailHeader from "@/components/AlbumListDetailHeader.vue";
import {getAlbumContent, getArtistAlbums} from "@/http";
import SongList from "@/components/SongList.vue";
import {ALUBMLISTNOAUTHOR, TYPEOFALBUM} from "@/http/constant";
import SongPart from "@/components/SongPart.vue";
import {formatArray} from "@/http/tools";
import BackToHead from "@/minicomponents/BackToHead.vue";

export default {
    name: "AlbumListDetailPage",
    components: {
        BackToHead,
        SongPart,
        SongList,
        AlbumListDetailHeader
    },
    data() {
        return {
            isLoading: true,
            songs: [],
            albumDetail: {
                albumId: 163506708,
                name: 'On Me',
                titleImg: 'https://p2.music.126.net/uzvtVVLNowE60ngZXqOYqA==/109951168539720299.jpg',
                artist: {
                    name: "EPTEND",
                    id: 13837118,
                },
                company: {
                    name: 'Capitol Records UK / EMI',
                    id: ''
                },
                publishTime: '1681228800000',
                songNum: 1,
                description: 'Written by EPTEND\nProduced by 1Lonzo, EPTEND\nArranged by 1Lonzo\n\nMix/Master Engineer. 김진환\n\nPhotography. 정수빈\n',
                type: 'Single'
            },
            isHasMore: false,
            moreAlbum: [],
            dataId: -1
        }
    },
    methods: {
        // 更新数据
        updateData(id) {
            // 请求歌单详情数据
            this.isLoading = true
            // 获取专辑内容
            getAlbumContent(id).then(res => {
                const {code, songs, album} = res
                if (code === 200) {
                    // 专辑头部信息
                    this.albumDetail = {
                        albumId: album.id,
                        name: album.name,
                        titleImg: album.picUrl,
                        artist: {
                            name: album.artist.name,
                            id: album.artist.id,
                        },
                        company: {
                            name: album.company,
                            id: album.companyId
                        },
                        publishTime: album.publishTime,
                        songNum: songs.length,
                        description: album.description,
                        type: album === 'Single' ? 'Single' : 'Album'
                    }
                    // 格式化音乐
                    this.songs = songs.map((item, index) => {
                        const {id, name, ar, al, dt, alia} = item
                        return {
                            index: index + 1,
                            id,
                            musicName: name,
                            // 专辑主要歌手
                            mainSinger: {
                                name: album.artist.name,
                                id: album.artist.id,
                            },
                            singers: ar,
                            picUrl: al.picUrl,
                            // 专辑信息
                            albumName: {
                                alId: al.id,
                                alName: al.name
                            },
                            time: dt,
                            // 别名
                            alia,
                            // 不显示专辑所属的歌手
                            isShowMainArtist: false
                        }
                    })
                    // 获取该作者的专辑
                    return getArtistAlbums(album.artist.id, 4)
                }
            }).then(res => {
                const {code, more, hotAlbums} = res
                if (code === 200) {
                    this.isHasMore = more
                    this.moreAlbum = formatArray(1, 5, hotAlbums.filter(item => {
                        // 过滤掉与当前专辑相同的专辑
                        return String(item.id) !== String(this.albumDetail.albumId)
                    }))
                    this.isLoading = false
                }
            })
        }
    },
    beforeRouteUpdate(to, from, next) {
        // 重复进入同一路由更新数据
        const {params: {id}} = to
        this.updateData(id)
        next()
    },
    activated() {
        const {id} = this.$route.params
        if (String(id) !== String(this.dataId)) {
            // 组件激活的时候更新数据
            this.updateData(this.$route.params.id)
        }
        this.dataId = id
    },
    computed: {
        type() {
            return TYPEOFALBUM
        },
        albumItem() {
            const {artist} = this.albumDetail
            return {
                title: `More by ${artist.name}`,
                type: ALUBMLISTNOAUTHOR,
                specialRoutes: "#",
                musicList: this.moreAlbum,
                isShowAll: false
            }
        }
    }
}
</script>

<style scoped lang="less">
.album-list {
  //width: 75%;
  //margin: 80px auto;

  .album-copyright {
    font-size: .7vw;
    font-weight: 300;
    text-align: right;
  }
}
</style>